<style lang="scss" scoped>
.search {
  background: #f4f4f4;

  .sousuo {
    background: white;
  }
}

header {
  text-align: center;
  background: white;

  input {
    margin: 10px 0;
    padding-left: 20px;
    width: 80%;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    border: 1px solid #12df2d;
    font-size: 15px;
  }

  span {
    color: #999;
    margin-left: 15px;
  }
}

.remen {
  width: 90%;
  margin: 0 auto;
  position: relative;

  h4 {
    padding: 10px 0;
    font-weight: normal;
  }

  div {
    display: flex;
    flex-wrap: wrap;

    span {
      display: block;
      padding: 3px 10px;
      border-radius: 15px;
      background-color: #e7e5e55b;
      color: #999;
      margin: 5px;
      font-size: 14px;
    }
  }

  .van-icon {
    position: absolute;
    right: 0;
    top: 10px;
    color: #999;
  }
}

.tuijian {
  width: 90%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e8e7e7;

  .van-icon {
    font-size: 18px;
    width: 30px;
    height: 30px;
  }
}

.tu {
  margin-top: 10px;
  text-align: center;

  img {
    width: 95%;
    border-radius: 5px;
  }
}

.tablist {
  padding: 20px 10px;
  background: white;
  margin: 10px;
  border-radius: 6px;

  .top {
    display: flex;

    .left {
      width: 50px;
      margin: 0 5px;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1.5px solid #44d477;
      }
    }

    .right {
      margin: 0;
      line-height: 20px;

      .right-top {
        display: flex;
        margin: 5px 0;

        span {
          margin: 0;
        }

        .border::after {
          display: block;
          width: 10px;
          text-align: center;
          height: 10px;
          margin-top: 5px;
          border-right: 1px solid #ccc;
          content: "";
        }

        .title {
          margin-left: 8px;
          font-size: 14px;
        }

        .tag {
          margin-left: 5px;
          font-size: 13px;
          padding: 1px 2px;
          background: #e4eef4;
          color: rgb(44, 116, 224);
        }
      }

      .right-bottom {
        span {
          margin: 0 3px;
        }

        .city {
          color: rgb(20, 187, 5);
        }

        .hospital {
          font-size: 14px;
        }

        .type {
          background: #1cc381;
          color: white;
          font-size: 14px;
          padding: 1px 3px;
          border-radius: 3px;
        }

        .tagname {
          font-size: 13px;
          background-color: rgba(244, 226, 184, 0.849);
          color: rgba(147, 106, 9, 0.849);
        }
      }
    }
  }

  .middle {
    margin: 10px 0;

    div {
      width: 95%;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    p {
      margin: 10px;

      span {
        color: #999;
        font-size: 14px;
        margin-right: 20px;
      }

      .xing {
        color: #6c6b6b;
        font-weight: 600;

        img {
          width: 14px;
          height: 14px;
        }
      }

      .num {
        span {
          font-weight: 600;
          color: #6c6b6b;
        }
      }
    }
  }

  .bottom {
    width: 95%;

    span {
      padding: 5px;
      border: 1.5px solid #44d477;
      border-radius: 15px;
      color: #1cc381;
      font-size: 14px;
    }
  }
}

.tab {
  .tabname {
    background: white;
    text-align: center;
    height: 30px;
    line-height: 30px;

    span {
      display: inline-block;
      width: 25%;
    }
  }
}

.tan {
  position: fixed;
  top: 43%;

  .city {
    display: flex;

    .left {
      height: 450px;
      overflow: auto;
      width: 50%;
      background: #e8e8e8;

      >div {
        line-height: 30px;
        padding: 10px;

        div {
          width: 100%;
          line-height: 30px;
          padding: 10px 0;
          background: #cbc9c9;
          color: #000;
        }
      }
    }

    .right {
      flex: 1;
      height: 450px;
      overflow: auto;

      div {

        div {
          line-height: 30px;
          padding: 10px;
        }
      }

    }
  }

  .sort {
    p {
      line-height: 30px;
      padding: 10px;
      border-bottom: 1px solid #e7e7e7;
    }
  }
}

.active {
  background: white;
  color: #0fea5c;
}
</style>

<template>
  <div class="search">
    <header>
      <input type="text" @input="searchInput" v-model="searchValue" placeholder="输入症状、疾病、医院、科室、医生" @click="input">
      <span @click="search">搜索</span>
    </header>
    <div v-if="flag == true" class="sousuo">
      <!-- 推荐搜索 -->
      <div>
        <div v-for="(item, index) in searchData" :key="index" class="tuijian">
          <van-icon name="search" />
          {{ item.item }}
        </div>
      </div>
      <!-- 历史搜索 -->
      <div class="remen">
        <h4>历史搜索</h4>
        <div>
          <span @click="history(item)" v-for="(item, index) in historylist" :key="index">
            {{ item }}
          </span>
          <van-icon name="delete-o" @click="clear" />
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="remen">
        <h4>热门搜索</h4>
        <div>
          <span v-for="(item, index) in remensearchlist" :key="index" @click="getsearch(item.recommend_word)">
            {{ item.recommend_word }}
          </span>
          <van-icon name="replay" @click="replay" />
        </div>
      </div>
      <div class="tu" @click="toimg">
        <img :src="img.image" alt="">
      </div>
    </div>
    <div v-else="" class="tab">
      <div class="tabname">
        <span @click="showPopup">全国</span>
        <span @click="showDepartment">科室</span>
        <span @click="showDisease">疾病</span>
        <span @click="showSort">排序</span>
      </div>
      <div v-for="(item, index) in filterlist" :key="index" class="tablist">
        <div class="top">
          <div class="left">
            <img :src="item.img" alt="">
          </div>
          <div class="right">
            <p class="right-top">
              <span class="name">{{ item.name }}</span>
              <span class="border"></span>
              <span class="title">
                {{ item.title }}
                {{ item.clinic_name }}
              </span>
              <span class="tag" v-if="item.tag1 != ''">
                {{ item.tag1 }}
              </span>
              <span v-else>

              </span>
            </p>
            <p class="right-bottom">
              <span class="city">{{ item.city }}</span>
              <span class="hospital">
                {{ item.hospital }}
              </span>
              <span class="type" v-if="item.tag2 != ''">
                {{ item.tag2 }}
              </span>
              <span v-else>

              </span>
              <span class="tagname" v-if="item.tag3 != ''">
                {{ item.tag3 }}
              </span>
              <span v-else>

              </span>
            </p>
          </div>
        </div>
        <div class="middle">
          <div>擅长:{{ item.desc }}</div>
          <p>
            <span class="xing">
              {{ item.descrip }}
              <img :src="item.descrip_icon" alt="">
            </span>
            <span class="num">
              {{ item.descrip2 }}
              <span>
                {{ item.descrip_num }}
              </span>
            </span>
            <span class="num">
              {{ item.descrip3 }}
              <span>{{ item.descrip3_num }}</span>
            </span>
          </p>
        </div>
        <div class="bottom">
          <span>
            {{ item.service_type_verbose }}
            ￥{{ item.price }}
          </span>
        </div>
      </div>
    </div>
  </div>
  <van-popup v-model:show="show" :style="{ width: '100%', height: '60%' }" class="tan">
    <div class="city">
      <div class="left">
        <div v-for="(item, index) in city" :key="index" @click="activeIndex(index)"
          :class="active == index ? 'active' : ''">
          {{ item.province }}
        </div>
      </div>
      <div class="right">
        <div v-for="(item, index) in city" :key="index">
          <div v-for="(item, index) in item.cities" :key="index" v-if="index === active">
            <p @click="changeCity(item)">
              {{ item }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
  <van-popup v-model:show="showDp" :style="{ width: '100%', height: '60%' }" class="tan">
    <div class="city">
      <div class="left">
        <div v-for="(item, index) in department" :key="index" @click="activeIndex1(index)"
          :class="active1 == index ? 'active' : ''">
          {{ item.province }}
        </div>
      </div>
      <div class="right">
        <div v-for="(item, index) in department" :key="index">
          <div v-for="(item, index) in item.cities" :key="index" v-if="index === active1">
            <p @click="changeDepartment(item)">
              {{ item }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
  <van-popup v-model:show="showDis" :style="{ width: '100%', height: '60%' }" class="tan">
    <div class="city">
      <div class="left">
        <div v-for="(item, index) in disease" :key="index" @click="activeIndex2(index)"
          :class="active2 == index ? 'active' : ''">
          {{ item.province }}
        </div>
      </div>
      <div class="right">
        <div v-for="(item, index) in disease" :key="index">
          <div v-for="(item, index) in item.cities" :key="index" v-if="index === active2">
            <p @click="channgeDisease(item)">
              {{ item }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
  <van-popup v-model:show="showSt" :style="{ width: '100%', height: '60%' }" class="tan">
    <div class="sort">
      <div>
        <p v-for="(item, index) in sortlist" :key="index" @click="changeSort(item, index)"
          :class="active3 === index ? 'active' : ''">
          {{ item }}
        </p>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { useRoute } from 'vue-router';
import _ from 'lodash';
import { onMounted, ref, computed, watch } from 'vue';
import axios from '../../http/axios';
import { getshi } from '@/http/http';
import city from '../../data/city.json'
import department from '../../data/department.json'
import disease from '../../data/disease.json'

const remensearchlist = ref([])
const searchData = ref([])
const searchlist = ref([])
var filterlist = ref([])
const img = ref([])
const flag = ref(true)
const sortlist = ref([
  '综合排序', '接诊量', '好评', '回复速度'
])
const route = useRoute()
const keyword = route.query.item
onMounted(() => {
  console.log(historylist);
  console.log(keyword);
  searchValue.value = keyword
  if (searchValue.value != undefined) {
    search()
  }
})
// 弹出层
//TAB切换
const active = ref(0);
const activeIndex = (index) => {
  active.value = index
  // console.log(active.value);
}
// 城市筛选
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const changeCity = (items) => {
  filterlist = computed(() => {
    return searchlist.value.filter(item => item.city.includes(items));
  });
  console.log(filterlist.value);
  show.value = false;
}

//TAB切换
const active1 = ref(0);
const activeIndex1 = (index) => {
  active1.value = index
  // console.log(active1.value);
}
//科室筛选
const showDp = ref(false)
const showDepartment = () => {
  showDp.value = true;
};
const changeDepartment = (items) => {
  filterlist = computed(() => {
    return searchlist.value.filter(item => item.clinic_name.includes(items))
  })
  console.log(filterlist.value);
  showDp.value = false
}
//TAB切换
const active2 = ref(0);
const activeIndex2 = (index) => {
  active2.value = index
  // console.log(active2.value);
}
// 疾病筛选
const showDis = ref(false)
const showDisease = () => {
  showDis.value = true
}
const channgeDisease = (items) => {
  filterlist = computed(() => {
    return searchlist.value.filter(item => item.desc.includes(items))
  })
  console.log(filterlist.value);
  showDis.value = false
}
// TAB切换
const active3 = ref(0);
// 排序
const showSt = ref(false)
const showSort = () => {
  showSt.value = true
}
const changeSort = (item, index) => {
  active3.value = index
  if (index === 1) {
    filterlist = computed(() => {
      return searchlist.value.sort((a, b) => b.descrip_num - a.descrip_num)
    })
  } else if (index === 2) {
    filterlist = computed(() => {
      return searchlist.value.sort((a, b) => b.descrip3_num - a.descrip3_num)
    })
  } else if (index === 3) {
    filterlist = computed(() => {
      return searchlist.value.sort((a, b) => b.price - a.price)
    })
  }
  console.log(filterlist.value);
  showSt.value = false
}
// 历史搜索
const history = (item) => {
  searchValue.value = item
  search()
}
// 清空历史
const clear = () => {
  localStorage.removeItem('historylist')
  historylist.value = []
}
// 刷新热门搜索
const replay = () => {
  remenlist()
  console.log(city[0].cities);
}

const searchValue = ref('')
const historylist = ref(JSON.parse(localStorage.getItem('historylist')) || [])
// var historylist=[...new Set(historylist1)]

const remenlist = async () => {
  let res = await axios.get('/static/api/search/recommend_tag/', {
    params: {
      from_type: 'home_search',
      version: '10.6.8'
    },
  })
  // console.log(res.data.data.hot_search_words)
  remensearchlist.value = res.data.data.hot_search_words
}
remenlist()

const imglist = async () => {
  let res = await axios.get('/static/api/search/recommend_tag/', {
    params: {
      from_type: 'home_search',
      version: '10.6.8'
    },
  })
  // console.log(res.data.data.ad)
  console.log(res.data.data.ad)
  img.value = res.data.data.ad
}
imglist()

const getsearch = (item) => {
  searchValue.value = item
  search()
}

onMounted(() => {
  axios.get(`/addres/doctorCY`).then(res => {
    // console.log(res.data.data)
    searchlist.value = res.data.data
  })
})

const search = () => {
  flag.value = false
  historylist.value.unshift(searchValue.value)
  localStorage.setItem('historylist', JSON.stringify(historylist.value))
  filterlist = computed(() => {
    if (!searchValue.value) {
      return searchlist.value;
    } else {
      return searchlist.value.filter(item => item.name.includes(searchValue.value) || item.clinic_name.includes(searchValue.value) || item.title.includes(searchValue.value) || item.desc.includes(searchValue.value));
    }
  });
  console.log(filterlist.value);
}

const input = () => {
  flag.value = true
}

const searchInput = _.debounce(() => {
  getshi(searchValue.value).then(res => {
    // console.log(res);
    searchData.value = res.data.data.slice(1, res.data.data.length)
    // console.log(searchData.value);
  })
}, 1000)

const toimg = () => {
  console.log(img.value.url);
  window.location.href = img.value.url
}
</script>